<script setup>
import { ref, onMounted, onUnmounted, nextTick  } from 'vue';
import {empGenderDataApi,empJobDataApi} from '@/api/report';
import * as echarts from 'echarts';
 
const empJobDOM = ref();
const empGenderDOM = ref();
let chartInstance = null;

//员工职业初始化条形统计图
const empJobInitEcharts = async () => {
  const result=await empJobDataApi();
  if (result.code) {
    chartInstance = echarts.init(empJobDOM.value);
     const option = {
      title: {
      text: '员工职位表',
      left: 'center',
      //字体加粗
      textStyle: {
        fontWeight: 'bold',
        fontSize: 30 
      }
    },
      xAxis: {
        data: result.data.jobList
      },
      yAxis: {},
      series: [
        {
          type: 'bar',
          data: result.data.dataList
        }
      ],
      //光标放入显示数据
      tooltip: {
          trigger: 'item'
        }
    };
    chartInstance.setOption(option); 
  }
}

//员工性别初始化饼状图
const empGenderInitEcharts =async () => {
  const result=await empGenderDataApi();
  if (result.code) {
    chartInstance = echarts.init(empGenderDOM.value);
    const  option = {
      title: {
      text: '员工性别统计',
      left: 'center',
      //字体加粗
      textStyle: {
        fontWeight: 'bold',
        fontSize: 30 
      }
    },
        series: [
          {
            type: 'pie',
            data: result.data
          }
        ],
        //光标放入显示数据
        tooltip: {
          trigger: 'item'
        },
        //图例显示在顶部
        legend: {
          top: 'bottom' 
        }
      }; 
    chartInstance.setOption(option);  
    
  }
  
}

onMounted(() => {
    empJobInitEcharts(); 
    empGenderInitEcharts();
  })

  onUnmounted(() => {
    if (chartInstance) {
      chartInstance.dispose();
    }
  });

</script>

<template>
  <div class="container" style="width: 100%; height: 100%; ">
    <div style="width: 50%; float: left; ">
      <div ref="empJobDOM" style="width: 500px; height: 650px;  "></div>
    </div>
    <div style="width: 50%; float: right; ">
      <div ref="empGenderDOM" style="width: 500px; height: 500px;  "></div>
    </div>
  </div>
 
</template>

<style scoped>

</style>